import React, { Component,Fragment } from 'react';
import styles from './index.module.scss';
import { Carousel, WingBlank } from 'antd-mobile';
import store from '../store'


import { connect } from "react-redux";
import { getIndexLoopImgAction, getIndexPromotionListAction } from '../store/actionCreator'

class index extends Component {
    componentDidMount() {
        store.dispatch(getIndexLoopImgAction());
        store.dispatch(getIndexPromotionListAction());
    }

    render() {
        return (
            <Fragment>
                {/* 导航栏部分开始 */}
                <div className={styles.header}>
                    <div className={styles.header_left}></div>
                    <div className={styles.header_middle}>云购商城</div>
                    <div className={styles.header_right}></div>
                </div>
                {/* 导航栏部分结束 */}

                {/* 轮播图部分开始 */}
                <div className={styles.loop_img}>
                    <WingBlank>
                        <Carousel autoplay={false} infinite className={styles.img_box}>
                            {this.props.swiperList.map((val) => (
                                <span
                                    key={val.loopimg_url}
                                    style={{ display: 'inline-block', width: '100%', height: this.props.imgHeight }}
                                >
                                    <img
                                        src={val.loopimg_url}
                                        alt={val.loopimg_title}
                                        style={{ width: "100%", verticalAlign: "top" }}
                                        onLoad={() => {
                                            // fire window resize event to change height
                                            window.dispatchEvent(new Event("resize"));
                                            this.setState({ imgHeight: this.props.imgHeight });
                                        }}
                                    />
                                </span>
                            ))}
                        </Carousel>
                    </WingBlank>
                </div>
                {/* 轮播图部分结束 */}

                {/* 导航条部分开始 */}
                <div className={styles.nav_img}>
                    {this.props.navs.map((val) => {
                        return (
                            <div className={styles.nav_img_item} key={val.id}>
                                <div>
                                    <img src={val.img} alt={val.text} />
                                </div>
                                <div>{val.text}</div>
                            </div>
                        )
                    })}
                </div>
                {/* 导航条部分结束 */}

                {/* 客户商城部分开始 */}
                <div className={styles.costomer_mell}>
                    <p>商城客户</p>
                    <div>
                        {this.props.lists.map((val) => {
                            return (
                                <div className={styles.costomer_mell_list} key={val.id}>
                                    <div><img src={val.img} alt={val.text} /></div>
                                    <div>{val.text}</div>
                                </div>
                            )
                        })}
                    </div>
                </div>
                {/* 客户商城部分结束 */}

                {/* 精选促销部分开始 */}
                <div className={styles.promotion}>
                    <div className={styles.promotion_header}>精选促销</div>
                    <div className={styles.promotin_lists}>
                        {this.props.promotionList.map((val) => {
                            return (
                                <div key={val.pid} className={styles.promotion_product}>
                                    <img src={val.product_url} alt={val.product_name} />
                                    <p className={styles.product_name}>{val.product_name}</p>
                                    <p className={styles.product_price}>
                                        <span>￥{val.product_price}</span>
                                        <span>￥{val.product_origin_price}</span>
                                    </p>
                                </div>
                            )
                        }
                        )}
                    </div>
                </div>
                {/* 精选促销部分结束 */}
            </Fragment>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        imgHeight: state.indexReducer.imgHeight,
        navs: state.indexReducer.navs,
        lists: state.indexReducer.lists,
        swiperList: state.indexReducer.swiperList,
        promotionList: state.indexReducer.promotionList
    };
};

export default connect(mapStateToProps, null)(index);

